<html>
<head>
    <title>插件</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>

</body>
</html>
<!-- banner -->
	<div class="banner">
		<div id="banner_tabs" class="flexslider">
        <ul class="slides">
            <li>
                <a title="" target="_blank" href="#">
                    <img width="1000" height="447" alt="" style="background: url(images/1.png) no-repeat center;" src="images/alpha.png">
                </a>
            </li>
            <li>
                <a title="" href="#">
                    <img width="1000" height="447" alt="" style="background: url(images/2.png) no-repeat center;" src="images/alpha1.png">
                </a>
            </li>
            <li>
                <a title="" href="#">
                    <img width="1000" height="447" alt="" style="background: url(images/3.png) no-repeat center;" src="images/alpha2.png">
                </a>
            </li>
            <li>
                <a title="" href="#">
                    <img width="1000" height="447" alt="" style="background: url(images/3.png) no-repeat center;" src="images/alpha3.png">
                </a>
            </li>
        </ul>
        <ul class="flex-direction-nav">
            <li><a class="flex-prev" href="javascript:;">Previous</a></li>
            <li><a class="flex-next" href="javascript:;">Next</a></li>
        </ul>
        <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
            <li><a>1</a></li>
            <li><a>2</a></li>
            <li><a>2</a></li>
            <li><a>2</a></li>
        </ol>
    </div>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/slider.js"></script>
    <script type="text/javascript">
    $(function() {
        var bannerSlider = new Slider($('#banner_tabs'), {
            time: 5000,
            delay: 400,
            event: 'hover',
            auto: true,
            mode: 'fade',
            controller: $('#bannerCtrl'),
            activeControllerCls: 'active'
        });
        $('#banner_tabs .flex-prev').click(function() {
            bannerSlider.prev()
        });
        $('#banner_tabs .flex-next').click(function() {
            bannerSlider.next()
        });
    })
    </script>
	</div>
